import React, { Component } from "react";

export default class FormCom extends Component {

  //声明事件回调
  submit = (e) => {
    //阻止默认行为  尽量往前放 保险
    e.preventDefault();
    //获取表单元素的值
    let username = this.user.value;
    let password = this.pass.value;
    //输出
    console.log(`当前的账号信息, 用户名: ${username}, 密码: ${password}`);
    
  }

  render() {
    return (
      // onSubmit 当表单提交的时候触发的一个事件
      <form onSubmit={this.submit}>
        <h2>登录</h2>
        <hr />
        用户名: <input ref={el => this.user = el} type="text" />
        <br></br>
        密码: <input type="password" ref={el => this.pass = el} />
        <br />
        <hr />
        <button>登录</button>
        <button type="reset">重置</button>
      </form>
    );
  }
}
